<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GraphiQL</title>
    <style>
        body {
            margin: 0;
        }
        #graphiql {
            height: 100dvh;
        }
        .loading {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
        }
    </style>
    <link rel="stylesheet" href="https://esm.sh/graphiql@5.2.1/dist/style.css"/>
    <link rel="stylesheet" href="https://esm.sh/@graphiql/plugin-explorer@5.1.1/dist/style.css"/>
    <script type="importmap">
        {
          "imports": {
            "react": "https://esm.sh/react@19.1.0",
            "react/": "https://esm.sh/react@19.1.0/",
            "react-dom": "https://esm.sh/react-dom@19.1.0",
            "react-dom/": "https://esm.sh/react-dom@19.1.0/",
            "graphiql": "https://esm.sh/graphiql@5.2.1?standalone&external=react,react-dom,@graphiql/react,graphql",
            "graphiql/": "https://esm.sh/graphiql@5.2.1/",
            "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.1.1?standalone&external=react,@graphiql/react,graphql",
            "@graphiql/react": "https://esm.sh/@graphiql/react@0.37.2?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
            "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.3?standalone&external=graphql",
            "graphql": "https://esm.sh/graphql@16.11.0",
            "@emotion/is-prop-valid": "data:text/javascript,"
          }
        }
    </script>
    <script type="module">
        import React from 'react';
        import ReactDOM from 'react-dom/client';
        import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
        import { createGraphiQLFetcher } from '@graphiql/toolkit';
        import { explorerPlugin } from '@graphiql/plugin-explorer';
        import 'graphiql/setup-workers/esm.sh';

        const params = new URLSearchParams(window.location.search);
        const path = params.get('path') || '/graphql';
        const url = `${location.protocol}//${location.host}${path}`;
        const wsPath = params.get('wsPath') || '/graphql';
        const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
        const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;
        const gqlFetcher = createGraphiQLFetcher({'url': url, 'subscriptionUrl': subscriptionUrl});
        const plugins = [HISTORY_PLUGIN, explorerPlugin()];
        const xsrfToken = document.cookie.match(new RegExp('(?:^| )XSRF-TOKEN=([^;]+)'));
        const initialHeaders = xsrfToken ? `{ 'X-XSRF-TOKEN' : '${ xsrfToken[1] }' }` : undefined;

        function App() {
            return React.createElement(GraphiQL, {
                fetcher: gqlFetcher,
                defaultEditorToolsVisibility: true,
                headerEditorEnabled: true,
                shouldPersistHeaders: true,
                initialHeaders: initialHeaders,
                plugins: plugins,
            });
        }

        const container = document.getElementById('graphiql');
        const root = ReactDOM.createRoot(container);
        root.render(React.createElement(App));
    </script>
</head>
<body>
    <div id="graphiql"><div class="loading">Loading...</div></div>
</body>
</html>
